<template>
  <div id="label_manage" class="container">
    <div class="content">
      <!-- <div class="title">标签管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 3.5rem;"
              clearable
              placeholder="搜索 标签名称"
              v-model="tabledisplayObj.tagName"
              class="input_search"
            ></el-input>
            <div
              @click="search()"
              v-if="hasApi('getTagListPageByOrg')"
              class="search_btn"
              style="margin-left:0.1rem;"
            >搜索</div>
            <div v-if="hasApi('tagAdd')" class="right_btn" @click="addCofim">新&nbsp;&nbsp;增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 6rem;">序号</td>
                <td style="width: 4rem;">标签名称</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 4rem;">创建人</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in labelList">
                <td>{{item.orderBy}}</td>
                <td>{{item.tagName}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <span
                    v-if="hasApi('tagUpdate')"
                    class="operate_btn"
                    @click="handleEdit(index,item)"
                  >编辑</span>
                  &nbsp;
                  <span
                    v-if="hasApi('tagDelete')"
                    class="operate_btn"
                    @click="handleDelete(index,item)"
                  >删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <createLabel ref="createLabel" @callback="closeAdd"></createLabel>
  </div>
</template>

<script>
import createLabel from "./common/createLabel";
let vm;
let user;
export default {
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        tagName: "",
        orgId: "",
        total: 0
      },
      isShowAdd: "",
      labelList: []
    };
  },
  components: {
    createLabel
  },
  methods: {
    search() {
      vm.tabledisplayObj.currPage = 1;
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 初始化数据
     */
    initData() {
      this.getData(this.tabledisplayObj);
    },
    campusChange: function(campusId) {
      //   vm.tabledisplayObj.campusId = campusId;
      //   this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {
      let labeltemp = []; //临时存放列表
      api.getTagListPageByOrg(paras).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          labeltemp = data.list;
          vm.tabledisplayObj.total = data.totalCount;
          vm.labelList = labeltemp;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange: function(val) {
      this.tabledisplayObj.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
      this.initData();
    },
    closeAdd(data) {
      console.log(data);
      this.initData();
    },
    /**
     * 向数组中添加数据
     */
    addCofim() {
      vm.$refs.createLabel.init({});
    },
    /**
     * 更新/编辑数据
     */
    handleEdit(index, row) {
      vm.$refs.createLabel.init(JSON.parse(JSON.stringify(row)));
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将删除该标签, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            tagId: row.tagId
          };
          api.tagDelete(paras).then(function(data) {
            if (data.result == "操作成功") {
              vm.initData();
              vm.$message({
                message: "删除成功",
                type: "success"
              });
            } else {
              vm.$message.error(data.result);
            }
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dicdata = tool.getItem(lsKey.dict, true);
    if (this.$route.query.isShowAdd) {
      vm.isShowAdd = tool.decode(this.$route.query.isShowAdd);
      if (vm.isShowAdd == "1") {
        vm.addCofim();
      }
    }

    this.tabledisplayObj.orgId = user.orgId;
    this.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#label_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>